﻿<script type="text/javascript">
	function setColors(elem,old_value){
		//===stylesheets control!==========
		var elem_value = elem.text();
		
		if (elem_value.indexOf("%")>-1){
			elem_value = elem_value.substring(0,elem_value.length-1);
			elem_value = parseFloat(elem_value);
			
			if (elem_value > 0){
				elem.css('backgroundColor','#C5FFAD');
			}else{
				elem.css('backgroundColor','#FFADBB');
			}				
		}else{
			if (elem_value != old_value){
				elem.css('backgroundColor','#FDFFCC');
			}else{
				//elem.css('backgroundColor','transparent');	
				elem.css('backgroundColor','#EFEFEF');	
			}			
		}

	}
	
	function setAlertColor(elem){
		elem.css('backgroundColor','#FDFFCC');	
	}
	
function ajaxGrid(){
		$.ajax({
		   contentType: 'application/json',
		   type: "GET",
		   url: "/monitor_test/",
		   dataType: 'json',
		   success: function(resp) {
						var item = resp;
						var item_row = String(item).split("#,");
						for (i in item_row){
							
							var item_fields = String(item_row[i]).split(",");
							
							//alert(String(item_row[i]));
							var td_names_arr = new Array("ativo_cod","porc","abertura","max","min","ultimo","oferta_compra","volume","min_forever","max_forever");
							
							for (j in td_names_arr){
								var elem = $("#"+td_names_arr[j] + "_" + item_fields[0]);	
								if (elem!=null){
									var curr_value = elem.text();
									elem.html(item_fields[j]);
									setColors(elem,curr_value);
								}
							}
							
						}
						return;	
					},
			error: function() {
				// Prompt for user data and process the result using a callback:
				//alert('Falha de conexao com o servidor.');
				$("#erro_dialog").dialog({ resizable: false });
			},
        });
 }	

 setInterval('ajaxGrid();', 20000);

$(document).ready(function() 
    { 
        $("#monitor-table").tablesorter(); 
    } 
); 

var global_ativos_cod = new Array({% for row in response %}"{{ row.0 }}",{% endfor %}"dummy");
//alert(global_ativos_cod);
</script>
<div class="main-content-monitor">
<table class="tablesorter" cellspacing="0" id="monitor-table" style="font-family:Verdana;font-size:11px;left:10px;">
	<thead>
            <tr style="background:#eeeeee;">
{% for field in fields_abr %}			
			<th>{{ field }}</th>
{% endfor %}				
			<th>DEL</th>
            </tr>
	</thead>
	<tbody>
{% for row in response %}    
	<tr id="{{ row.0 }}_row">       
    <td id="{{ fields.0.0 }}_{{ row.0 }}">{{ row.0 }}</td>    
	<td id="{{ fields.1.0 }}_{{ row.0 }}">{{ row.1 }}</td> 	
	<td id="{{ fields.2.0 }}_{{ row.0 }}">{{ row.2 }}</td> 
	<td id="{{ fields.3.0 }}_{{ row.0 }}">{{ row.3 }}</td> 
	<td id="{{ fields.4.0 }}_{{ row.0 }}">{{ row.4 }}</td> 
	<td id="{{ fields.5.0 }}_{{ row.0 }}">{{ row.5 }}</td> 
	<td id="{{ fields.6.0 }}_{{ row.0 }}">{{ row.6 }}</td> 
	<td id="{{ fields.7.0 }}_{{ row.0 }}">{{ row.7 }}</td> 
	<td id="{{ fields.8.0 }}_{{ row.0 }}">{{ row.8 }}</td> 
	<td id="{{ fields.9.0 }}_{{ row.0 }}">{{ row.9 }}</td>
	<td id="remove_{{ row.0 }}"><img align="center"  style="cursor:pointer;padding:0px;border:0px" src="/static/images/remove-icon.png" width="8" height="8" onClick="$('#{{ row.0 }}_row').remove();"></td> 	
	</tr>   
{% endfor %}
	</tbody>
</table>
<div class="contactform"> 

<a>[Adicionar Ativo]</a>
<a>[Salvar Monitor]</a>
<br><br>
</div>

	<div class="contactform"> 
	<form action="" method="post" id="registraForm" name="registraForm"> 
	<fieldset><legend>&nbsp;Adicionar Ativo:&nbsp;</legend> 
		
			<div class="fieldWrapper"> 
				
				<div id="first_name_erro"></div> 
				<p>
				  <label class="left" for="first_name"><span class="obrigatorio">Cod Ativo:</span></label> 
				<input id="id_first_name" type="text" class="field" name="first_name" maxlength="50" /> 
				</p> 
			</div> 
		
	<p><input class="button" id="btn_registra" type="button" value="Adicionar" /></p> 
	</form> 
	  </div>   
	</fieldset>
	</div>
</div>